<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>爱奇异视频播放列表</title>
        <style>
            *{
                margin:0px;
                padding:0px;
            }

            .box{
                width:1000px;
                margin:20px auto;
            }
            .box h3{
                font-size: 18px;
                line-height:40px;
                height:40px;

            }
            li{
                display: inline-block;
                padding:10px;
                margin-right:5px;
                background:white;
            }
            ul li:hover{
                box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1),0 0 10px 0 rgba(0,0,0,0.2) ;
                border-radius:10px;
            }

            .box img{
                border-radius:10px;

            }
            li h4:nth-of-type(1){
                font-size: 16px;
                color: #4d4d4d;
            }

            li p:nth-of-type(1){
                color: #640000;
                font-size: 14px;

            }
            li p:nth-of-type(2){
                font-size: 12px;
                color: blue;
            }
            a{
                text-decoration:none;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <h3>热播</h3>
            <ul>
                <li><a href="#">
                    <img src="images/img1.png" alt=""/>
                    <h4>神武赵子龙</h4>
                    <p>怒，林更新不抱网红抱女神</p>
                    <p>点击次数：242445次</p>
                </a></li>


                <li> <a href="#">
                    <img src="images/img2.png" alt=""/>
                    <h4>旋风十一人</h4>
                    <p>胡歌变教练在撩前女友</p>
                    <p>点击次数：242445次</p>
                </a></li>


                <li><a href="#">
                    <img src="images/img3.png" alt=""/>
                    <h4>太阳的后裔</h4>
                    <p>宋慧乔吃嫩草</p>
                    <p>点击次数：242445次</p>
                </a></li>

                <li><a href="#">
                    <img src="images/img4.png" alt=""/>
                    <h4>山海经之赤影传说</h4>
                    <p>娜扎张翰再度联手</p>
                    <p>点击次数：242445次</p>

                </a></li>
            </ul>
        </div>
    </body>
</html>